<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // function fn(cb){
        //     setTimeout(() => {
        //         console.log("执行了fn函数");
        //         // console.log("执行了后续操作");
        //         cb && cb();
        //     }, 1000);
        // }


        // 1.回调函数 
        // fn(function(){
        //     console.log("执行异步之后的代码");
        // });

        // 2.promise来解决异步问题

        // function fn(){
        //     return new Promise(res=>{
        //         setTimeout(() => {
        //         console.log("执行了fn函数");
        //         // console.log("执行了后续操作");
        //         res();
        //     }, 1000);
        //     })
        // }

        // fn().then(()=>{
        //     console.log("执行异步之后的代码");
        // })


        // 3.观察者模式 ：多个对象间 互相影响 ，一个对象发生改变会触发另外的对象改变；
        // 1.延迟执行 （解决异步问题）2.一对多 
        // document.addEventListener("click",function(){
        //     console.log("点击了111");
        // })
        // document.addEventListener("click",function(){
        //     console.log("点击了222");
        // })


        // let zhangsan  = {
        //     name:"张三",
        //     fn(){
        //         console.log("我是张三函数");
        //     }
        // }

        // let lisi  = {
        //     name:"李四",
        //     fn2(){
        //         console.log("我是李四函数");
        //     }
        // }

        // 1.收集多种方法 2.延迟执行多次方法
        // 观察者模式 （自定义事件）;
        class Observe {
            constructor() {
                this.handles = {};  //存被观察的方法；
            }
            addEvent(evnetName, fn) {
                // { myclick: [fn1,fn2,fn3...] ,myclick2:[]}
                if (typeof this.handles[evnetName] == "undefined") {
                    this.handles[evnetName] = [];
                }
                this.handles[evnetName].push(fn);
            }
            // 触发事件 trigger  , dispath ,emit
            trigger(evnetName) {
                this.handles[evnetName].forEach(fn => {
                    fn();
                })
            }
        }

        // 一个对象
        // let obj = new Observe();
        // obj.addEvent("myclick",zhangsan.fn);
        // obj.addEvent("myclick",lisi.fn2);
        // setTimeout(() => {
        //     obj.trigger("myclick");
        // }, 3000);

        // let EventObj = new Observe();
        // function fn() {
        //     setTimeout(() => {
        //         console.log("执行了fn函数");
        //         // console.log("执行了后续操作");
        //         EventObj.trigger("myevent");
        //     }, 1000);
        // }


        // EventObj.addEvent("myevent", function () {
        //     console.log("异步执行完成之后需要执行的代码");
        // })
        // fn();





        // js原生的自定义事件 
        // EventTarget  自定义事件 类；
        let eventObj = new EventTarget();

        function fn() {
            setTimeout(() => {
                console.log("执行了fn函数");
                // console.log("执行了后续操作");
                // EventObj.trigger("myevent");
                // 触发自定义事件
                eventObj.dispatchEvent(new CustomEvent("myevent"));
            }, 1000);
        }

        eventObj.addEventListener("myevent",function(){
            console.log("异步之后需要执行的代码");
        })

        fn();


    </script>
</body>

</html>